<script lang="ts">
export default {
  name: 'modelDetail',
}
</script>
<template>
  <div class="detail-head">
    <div class="head-close">
      <el-icon size="36" color="#FFFFFF" style="cursor: pointer;" @click="closeDialog()">
        <Close/>
      </el-icon>
    </div>
    <div class="head-btn" v-if="isLogin">
      <el-button round type="primary" v-if="is_favorite == 0" @click="getFavoriteAdd">
        <el-icon>
          <Star/>
        </el-icon>
        <span>加入收藏</span>
      </el-button>
      <el-button round type="primary" v-if="is_favorite == 1" @click="getFavoriteRemove">
        <el-icon>
          <StarFilled/>
        </el-icon>
        <span>取消收藏</span>
      </el-button>
      <el-button round type="primary" @click="addCart">
        <el-icon>
          <ShoppingCart/>
        </el-icon>
        <span>加入购物车</span>
      </el-button>
      <el-button round type="primary" @click="createOrder">
        <el-icon>
          <Pointer/>
        </el-icon>
        <span>选ta拍摄</span>
      </el-button>
    </div>
  </div>

  <div>
    <div class="model-info">
      <div class="model-info-head">
        <div>
          <el-avatar class="avatar-border" :size="100" :src="props.componentsData.cover_pic"/>
        </div>
        <div class="model-info-desc">
          <div>
            <span class="model-name-box">{{ props.componentsData.name }}</span>
          </div>
          <el-button link>
            <el-icon>
              <Location/>
            </el-icon>
            <span>{{ props.componentsData.countries.name }}</span>
          </el-button>
        </div>
      </div>
    </div>
    <div class="tags-box">
      <el-button v-for="item in userCatList" size="small" type="primary" round :key="item" plain>
        {{ item }}
      </el-button>
    </div>

    <div class="bto-box">
      <h4 class="al-title">视频案例</h4>
      <div class="video-list">
        <div class="video-item" v-for="item in videoList" :key="item">
          <video :src="item" @click="openVideo(item)"></video>
          <!--<video src="@/assets/Download.mp4" alt="">-->
        </div>
      </div>

    </div>

  </div>

  <div class="video-box">
    <el-dialog v-model="showVideo">
      <video class="dialog-video" :src="videoUrl" controls></video>
    </el-dialog>
  </div>


</template>
<script lang="ts" setup>
import store from '@/store';
import {ref, onMounted} from "vue";
import Https from "@/server";
import {ElLoading, ElMessage} from "element-plus";


const props = defineProps({
  detailData: {
    type: Object,
    required: true
  },
  componentsData: {
    type: Object,
    required: true
  }
});
const emit = defineEmits(["closeBtn", "clickBtn"]);
const is_favorite = ref(0);
const videoUrl = ref("");
const showVideo = ref(false);
const catList = store.state.catList;
const videoList = ref(props.detailData.video_url.split(","))

const isLogin = ref("");

interface UserList {
  [key: string]: any;
}

const userCatList = ref<UserList>([])
const getUserCatList = () => {
  let arr = [];
  for (let i in catList) {
    for (let j in props.detailData.cats) {
      if (Number(catList[i].id) === Number(props.detailData.cats[j])) {
        arr.push(catList[i].name);
      }
    }
  }
  userCatList.value = arr;
}


const getFavoriteAdd = () => {
  let params = {
    type: "add",
    value: props.componentsData.id,
  }
  try {
    emit("clickBtn", params);
    is_favorite.value = 1;
  } catch (e) {
    console.log(e)
  }

}

const getFavoriteRemove = () => {
  let params = {
    type: "remove",
    value: props.componentsData.id,
  }
  try {
    emit("clickBtn", params);
    is_favorite.value = 0;
  } catch (e) {
    console.log(e)
  }
}

const createOrder = () => {
  let params = {
    type: "isTa",
    value: props.componentsData,
  }
  try {
    emit("clickBtn", params);
  } catch (e) {
    console.log(e)
  }
}

const addCart = () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  let data = {
    id: props.componentsData.id,
    mch_id: props.componentsData.mch_id,
  }
  Https.getGoodsAttr(data).then((res: any) => {
    if (res.code == 0) {
      attrAddCart(res.data.attr[0], loading)
    } else {
      loading.close();
      ElMessage.error(res.msg)
    }

  })
}

const attrAddCart = (data: any, loading: any) => {
  let params = {
    goods_id: data.goods_id,
    attr: data.id,
    num: 1,
  }
  Https.postCartAdd(params).then((res: any) => {
    loading.close()
    if (res.code == 0) {
      ElMessage.success(res.msg);
    } else {
      ElMessage.error(res.msg);
    }
  })
}

const openVideo = (item:any) => {
  videoUrl.value = item;
  showVideo.value = true;
}

onMounted(() => {
  getUserCatList();
  isLogin.value = localStorage.getItem("access_token") as string;
  is_favorite.value = props.componentsData.is_favorite;
});

const closeDialog = () => {
  emit("closeBtn");
}
</script>
<style scoped lang="scss">
.detail-head {
  width: 1000px;
  height: 175px;
  position: absolute;
  left: 0;
  top: 0;
  background: url("@/assets/images/detail_bg.png") round;

  .head-close {
    margin: 25px 20px 0;
    display: flex;
    justify-content: flex-end;
  }

  .head-btn {
    position: relative;
    z-index: 9999;
    font-size: 19px;
    margin: 40px 25px 0;
    display: flex;
    justify-content: flex-end;
  }
}

.detail-box {
  width: 100%;
  min-height: 600px;
  overflow: hidden;
}

.model-info {
  margin-top: 75px;
  position: relative;
  z-index: 1;

  .model-info-head {
    display: flex;
    padding-left: 79px;
  }

  .avatar-border {
    border: 4px solid #FFFFFF;
  }

  .model-info-desc {
    margin: 50px 0 0 20px;
  }
}

.bto-box {
  padding: 0 20px;
  height: 500px;
  overflow: auto;
  scrollbar-width: none;
  margin-top: 20px;
}

.model-name-box {
  font-weight: 600;
  font-size: 20px;
  color: rgb(9, 23, 47);
  margin-right: 14px;
}

.al-title {
  margin-top: 10px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
  font-size: 16px;
  color: rgb(9, 23, 47);
}

.tags-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  padding: 0 72px 0 81px;
}

.video-list {
  height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 25px;


  .video-item {
    height: 168px;
    cursor: pointer;
    flex: 0 0 calc((100% - 4 * 25px) / 5);
    position: relative;
    border-radius: 7px;
    background: rgba(102, 159, 198, .3);

    video {
      width: 100%;
      height: 100%;
    }
  }
}

.video-box {
  position: relative;
  z-index: 9999999;
  background: #233;

  .dialog-video {
    height: 60vh;
    width: 100%;
    background: #333;
  }
}
</style>